<template>
    <div>
        <div class="indexBox" id="wrapperX">
            <div class="indexBox_item" @click="moveFun(item)" @scroll="scrollGetX($event)"
                :class="{ 'indexBox_active': item == activeCode }" v-for="item in indexList" :id="item + 'X'">{{ item }}
                <div class="indexBox_item_light" v-if="item == activeCode"></div>
            </div>
        </div>
        <div class="guideBox" @scroll="scrollGetY($event)" id="wrapper">
            <div class="guideBox_item" v-for="(item, index) in list" :id="item.tit">
                <div class="guideBox_item_tit">{{ item.tit }}
                    <span></span>
                </div>
                <img :src="v.msrc" alt="" v-for="(v,i) in item.images" @click="show(i, item.images)">
            </div>
        </div>
        <previewer :list="showlist" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
</template>
<script>
import { Previewer } from "vux";
export default {
    components: {
        Previewer,
    },
    data() {
        return {
            options: {
                getThumbBoundsFn(index) { },
            },
            showlist: [],
            activeCode: "",
            indexList: ["注册", "就诊人", "预约挂号", "扫码签到", "门诊缴费", "病历邮寄"],
            list: [{
                tit: "注册",
                images: [
                    {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/zc1.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/zc1.png",

                    },
                    {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/zc2.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/zc2.png",

                    },
                    {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/zc3.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/zc3.png",

                    }
                ]

            },

            {
                tit: "就诊人",
                images: [{
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr1.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr1.png",
                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr2.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr2.png",
                }, {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr3.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr3.png",
                }, {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr4.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/jzr4.png",
                }]
            },
            {
                tit: "预约挂号",
                images: [
                    {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh1.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh1.png",
                    },
                    {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh2.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh2.png",
                    }, {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh3.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh3.png",
                    }, {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh4.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh4.png",
                    }, {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh5.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh5.png",
                    },
                    {
                        msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh6.png",
                        src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yygh6.png",
                    }
                ]
            },
            {
                tit: "扫码签到",
                images: [{
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd1.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd1.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd2.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd2.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd3.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd3.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd4.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd4.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd5.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/qd5.png",

                }]
            },
            {
                tit: "门诊缴费",
                images: [{
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf1.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf1.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf2.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf2.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf3.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf3.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf4.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/mzjf4.png",

                }]
            },
            {
                tit: "病历邮寄",
                images: [{
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj1.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj1.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj2.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj2.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj3.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj3.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj4.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj4.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj5.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj5.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj6.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj6.png",

                },
                {
                    msrc: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj7.png",
                    src: "http://182.92.162.236:9000/ruoyi/ydkq/guide/yj7.png",

                }]
            }]

        }
    },
    methods: {
        moveFun(item) {
            this.activeCode = item
            let div = document.getElementById(item); // 指定的元素
            let wrapper = document.getElementById("wrapper");
            console.log(div.offsetTop)
            wrapper.scrollTo(0, div.offsetTop - 40);
        },
        scrollGetX(e) {
            let div = document.getElementById(this.activeCode);
            console.log(div)
        },
        scrollGetY(e) {

            let scrollTop = e.target.scrollTop
            let wrapperX = document.getElementById("wrapperX");

            this.list.forEach((element, index, arr) => {


                let offsetTop = document.getElementById(element.tit).offsetTop - 40;
                // 获取监听元素本身高度
                let scrollHeight = document.getElementById(element.tit).scrollHeight;
                if (scrollTop > offsetTop && scrollTop < (offsetTop + scrollHeight)) {
                    this.activeCode = element.tit
                    wrapperX.scrollTo(document.getElementById(this.activeCode + 'X').offsetLeft, 0);
                }



            });
        },
        logIndexChange(arg) {
            console.log(arg);
        },
        show(index, list) {
            this.showlist = list
            this.$vux.loading.show()
            setTimeout(()=>{
                this.$vux.loading.hide()
                this.$refs.previewer.show(index);
            },500)


        },
    },
}
</script>
<style scoped lang="less">
.indexBox {
    height: 2.5rem;
    width: 25rem;
    display: flex;
    overflow-x: scroll;



    &_item {

        height: 100%;
        width: 6.25rem;
        text-align: center;
        position: relative;
        line-height: 2.5rem;
        flex: 0 0 auto;
        font-size: 1.19rem;
        font-family: PingFang SC;
        color: #9CA6B9;


        &_light {
            width: 2.50rem;
            height: 0.19rem;
            background: #448EFF;
            border-radius: 0.13rem;
            position: absolute;
            bottom: 0.00rem;
            left: calc(~"50% - 1.25rem");
        }
    }

    &_active {
        font-weight: bold;
        color: #424652;
    }
}

.guideBox {
    height: calc(~"100vh - 2.5rem");
    overflow-y: scroll;

    .guideBox_item {
        &_tit {
            width: 100%;
            text-align: center;
            height: 3.125rem;
            line-height: 3.125rem;
            font-size: 19px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #424652;
            position: relative;

            span {
                width: 5rem;
                height: 5px;
                background: rgba(68, 142, 255, 0.49);
                position: absolute;
                top: 1.875rem;
                left: calc(~"50% - 2.5rem");
                border-radius: 0.125rem;
            }
        }

        img {
            width: 100%;
            height: auto;
        }
    }


}
</style>
